<template>
<div>
    <el-dialog :visible.sync="verElect.dialogAddVersion" size="tiny">
        <p class="dialog-title">添加电板</p>
        <el-form :model="version" :rules="rules" ref="version" label-width="100px">
            <el-row :gutter="30">
                <el-col :span="23">
                    <el-form-item label="设备名称" prop="deviceName">
                        <el-input v-model="version.deviceName" placeholder="请输入设备名称" :maxlength="20"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="23">
                    <el-form-item label="设备类型" prop="relayType">
                        <el-select v-model="version.relayType" style="width:100%" placeholder="请选择设备类型" @change="relayTypeChange">
                            <el-option v-for="item in relayTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="23" v-if="version.relayType=='0'">
                    <el-form-item label="电板地址" prop="relayNumber">
                        <el-select v-model="version.relayNumber" style="width:100%" placeholder="请选择电板地址">
                            <el-option v-for="(item,index) in relayNumberList" :key="relayNumberList[index]" :label="relayNumberList[index]" :value="relayNumberList[index]"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <p class="btn">
            <el-button @click="resetFormdelDialogAddTea('version')">关 闭</el-button>
            <el-button type="primary" @click="addVersion('version')" :loading="loadingBtn">保 存</el-button>
            </p>
        </div>
    </el-dialog>
</div>
</template>
<script>
import { getAppTypeList, addPanels, listNumber } from 'api/attendanceManage';
export default {
    props: {
        verElect: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            loadingBtn: false,
            relayTypeList: [
                {
                    id: '',
                    name: '请选择'
                },
                {
                    id: '1',
                    name: '无线调频'
                },
                {
                    id: '0',
                    name: '石榴仔'
                }
            ],
            relayNumberList: [],
            version: {
                deviceId: '',
                relayType: '',
                relayNumber: ''
            },
            rules: {
                deviceName: [
                    { required: true, message: '设备名称不能为空', trigger: 'blur' }
                ],
                relayType: [
                    { required: true, message: '请选择设备类型', trigger: 'change' }
                ],
                relayNumber: [
                    { required: true, message: '请选择设备地址', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        // this.getName();
    },
    methods: {
        addVersion(version) {
            this.$refs[version].validate((valid) => {
                if (valid) {
                    let schoolId = this.$route.params.id.split(';')[1]
                    let deviceId = this.$route.params.id.split(';')[2];
                    this.loadingBtn = true;
                    addPanels(this.version.relayType, schoolId, deviceId, this.version.deviceName, this.version.relayNumber).then(res => {
                        this.loadingBtn = false;
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.delDialogAddTea();
                        this.$emit('success', res)
                    }).catch(() => {
                        this.loadingBtn = false;
                    })
                } else {
                    return false;
                }
            });
        },
        getName() {
            getAppTypeList().then(res => {
                this.sNameList = res.data.content;
            })
        },
        handleClose() {
            this.$refs.version.resetFields();
            this.delDialogAddTea();
        },
    // 取消按钮 
        resetFormdelDialogAddTea(dataForm) {
            this.$refs[dataForm].resetFields();
            this.delDialogAddTea();
        },
    // 还原清空弹窗信息
        delDialogAddTea() {
            this.loadingBtn = false;
            this.version.deviceName = '';
            this.version.relayType = '';
            this.version.relayTypeList = [];
            this.version.relayNumber = '';
            this.version.relayNumberList = [];
            this.verElect.dialogAddVersion = false;
        },
        relayTypeChange(order) {
            if (order==0) {
                let deviceId = this.$route.params.id.split(';')[2]
                let schoolId = this.$route.params.id.split(';')[1]
                listNumber(schoolId, deviceId).then(res => {
                    this.relayNumberList = res.data.content;
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .el-form{
        padding-left:16px;
    }
    .dialog-title{
        width:60%;
        margin:0 auto;
    }
</style>


